.code-wrap {
  @apply relative flex w-full flex-col overflow-auto;

  pre > code {
    @apply block font-mono text-[14px] font-medium;

    background: transparent !important;
  }

  & {
    &:hover .copy-tip {
      opacity: 0.4;
      visibility: visible;
    }

    .copy-tip {
      position: absolute;
      right: 2em;
      top: 3em;
      opacity: 0.4;
      font-size: 0.6em;
      font-weight: 600;
      text-transform: uppercase;
      cursor: pointer;
      transition: opacity 0.5s;
      will-change: opacity;
      user-select: none;
      opacity: 0;
      visibility: hidden;
      transition:
        opacity 0.3s ease-in-out,
        visibility 0.3s ease-in-out;

      &:hover {
        opacity: 1;
      }

      &::after {
        content: '';
        bottom: -3px;
        position: absolute;
        left: 3px;
        right: 3px;
        height: 1px;
        background-color: currentColor;
      }
    }

    .language-tip {
      position: absolute;
      right: 1em;
      transform: translate(-0.5em, 0.5em);
      font-size: 0.8em;
      opacity: 0.7;
      z-index: 1;
    }
  }
}
